<template>
  <div>
    <!--头部 开始-->
    <header class="fix">
      <a href="javascript:history.go(-1);" class="returnBtn"></a>
      三只松鼠
      <a href="#" class="searchBtn"></a>
    </header>
    <!--头部 结束-->
    <!--内容 开始-->
    <main>
      <div class="popularMain">
        <div class="banner"><img src="../../images/temporary/3.jpg"></div>
        <div class="introduce">
          <div class="introduceTitle">
            <div class="introduceLogo"><img src="../../images/temporary/commodity12.png"></div>
            <h3>三只松鼠</h3>
            <div class="country"><em></em><span>中国</span></div>
          </div>
          <div class="checkUp">
            <div class="upText">
              <p>三只松鼠股份有限公司成立于2012年，是中国第一家定位于纯互联网食品品牌的企业，也是当前中国销售规模最大的食品电商企业。“三只松鼠”品牌一经推出，立刻受到了风</p>
              <p>三只松鼠股份有限公司成立于2012年，是中国第一家定位于纯互联网食品品牌的企业，也是当前中国销 售规模最大的食品电商企业。“三只松鼠”品牌一经推出，立刻受到了风</p>
              <p>三只松鼠股份有限公司成立于2012年，是中国第一家定位于纯互联网食品品牌的企业，也是当前中国销 售规模最大的食品电商企业。“三只松鼠”品牌一经推出，立刻受到了风</p>
            </div>
            <div class="upBtn">展开查看</div>
          </div>
        </div>
        <div class="classificaArray">
          <div class="arrayNav" id="tab">
            <a href="javascript:void(0);" class="current">热门</a>
            <a href="javascript:void(0);">
              价格
              <div class="sortIcon">
                <em class="Cur"></em>
                <em></em>
              </div>
            </a>
          </div>
          <div class="arrayList" id="content">
            <div class="arrayListInfo" style="display:block;">
              <a href="#">
                <div class="infoPic"><img src="../../images/temporary/commodity12.png"></div>
                <p>【任选】【百草味-手剥小白杏200g】坚果干果</p>
                <div class="price">
                  <span class="presentNum">￥<em>19</em>.9</span>
                  <span class="membershipNum">￥<em>19</em>.9 <i>会员价</i></span>
                </div>
                <div class="discount">
                  <span class="limit">限时折扣</span>
                  <span class="specific">99选10</span>
                </div>
              </a>
              <a href="#">
                <div class="infoPic"><img src="../../images/temporary/commodity12.png"></div>
                <p>【任选】【百草味-手剥小白杏200g】坚果干果</p>
                <div class="price">
                  <span class="presentNum">￥<em>19</em>.9</span>
                  <span class="membershipNum">￥<em>19</em>.9 <i>会员价</i></span>
                </div>
                <div class="discount">
                  <span class="limit">限时折扣</span>
                  <span class="specific">99选10</span>
                </div>
              </a>
              <a href="#">
                <div class="infoPic"><img src="../../images/temporary/commodity12.png"></div>
                <p>【任选】【百草味-手剥小白杏200g】坚果干果</p>
                <div class="price">
                  <span class="presentNum">￥<em>19</em>.9</span>
                  <span class="membershipNum">￥<em>19</em>.9 <i>会员价</i></span>
                </div>
                <div class="discount">
                  <span class="limit">限时折扣</span>
                  <span class="specific">99选10</span>
                </div>
              </a>
              <a href="#">
                <div class="infoPic"><img src="../../images/temporary/commodity12.png"></div>
                <p>【任选】【百草味-手剥小白杏200g】坚果干果</p>
                <div class="price">
                  <span class="presentNum">￥<em>19</em>.9</span>
                  <span class="membershipNum">￥<em>19</em>.9 <i>会员价</i></span>
                </div>
                <div class="discount">
                  <span class="limit">限时折扣</span>
                  <span class="specific">99选10</span>
                </div>
              </a>
            </div>
            <div class="arrayListInfo">
              <a href="#">
                <div class="infoPic"><img src="../../images/temporary/commodity12.png"></div>
                <p>【22】【百草味-手剥小白杏200g】坚果干果</p>
                <div class="price">
                  <span class="presentNum">￥<em>19</em>.9</span>
                  <span class="membershipNum">￥<em>19</em>.9 <i>会员价</i></span>
                </div>
                <div class="discount">
                  <span class="limit">限时折扣</span>
                  <span class="specific">99选10</span>
                </div>
              </a>
              <a href="#">
                <div class="infoPic"><img src="../../images/temporary/commodity12.png"></div>
                <p>【22】【百草味-手剥小白杏200g】坚果干果</p>
                <div class="price">
                  <span class="presentNum">￥<em>19</em>.9</span>
                  <span class="membershipNum">￥<em>19</em>.9 <i>会员价</i></span>
                </div>
                <div class="discount">
                  <span class="limit">限时折扣</span>
                  <span class="specific">99选10</span>
                </div>
              </a>
              <a href="#">
                <div class="infoPic"><img src="../../images/temporary/commodity12.png"></div>
                <p>【22】【百草味-手剥小白杏200g】坚果干果</p>
                <div class="price">
                  <span class="presentNum">￥<em>19</em>.9</span>
                  <span class="membershipNum">￥<em>19</em>.9 <i>会员价</i></span>
                </div>
                <div class="discount">
                  <span class="limit">限时折扣</span>
                  <span class="specific">99选10</span>
                </div>
              </a>
              <a href="#">
                <div class="infoPic"><img src="../../images/temporary/commodity12.png"></div>
                <p>【22】【百草味-手剥小白杏200g】坚果干果</p>
                <div class="price">
                  <span class="presentNum">￥<em>19</em>.9</span>
                  <span class="membershipNum">￥<em>19</em>.9 <i>会员价</i></span>
                </div>
                <div class="discount">
                  <span class="limit">限时折扣</span>
                  <span class="specific">99选10</span>
                </div>
              </a>
            </div>
          </div>
          <a href="#" class="shoppCatBtn"></a>
        </div>
      </div>
    </main>
    <!--内容 结束-->
  </div>
</template>

<script>
  import Swiper from 'swiper'
    export default {
        name: "popularBrand",
      methods:{
  /*分类三级切换*/
        arrayTab:function (){
    window.onload = function()
    {
      var $li = $('#tab a');
      var $ul = $('#content .arrayListInfo');

      $li.on("click",function(){
        var $this = $(this);
        var $t = $this.index();
        $li.removeClass();
        $this.addClass('current');
        $ul.css('display','none');
        $ul.eq($t).css('display','block');
      })
    }
  },

      },
      mounted:function () {
        this.arrayTab();

      }
    }
</script>

<style scoped>
  @import "../../css/common/common.css";
@import "../../css/other/threeLevel.css";
</style>
